<template>
	<view class="order">
		<view class="topFix">
			<view class="searchBox flex-align-center">
				<image src="@/static/images/search.png" mode=""></image>
				<input type="text" v-model="keyword" placeholder="新注册客户姓名/手机号" />
				<view class="flex-aj-center" @click="search" >搜索</view>
			</view>
			<scroll-view scroll-x="true" style="white-space: nowrap;" >
				<view class="statusList flex-align-center">
					<view :class="current==''?'active':''" @click="tabSelect('')" >全部</view>
					<view :class="current==1?'active':''" @click="tabSelect(1)">已注册</view>
					<view :class="current==2?'active':''" @click="tabSelect(2)">待审核</view>
					<view :class="current==3?'active':''" @click="tabSelect(3)">审核拒绝</view>
					<view :class="current==4?'active':''" @click="tabSelect(4)">审核通过</view>
					<view :class="current==5?'active':''" @click="tabSelect(5)">可结算</view>
				</view>
			</scroll-view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in orderList" :key="index">
				<view class="flex-between-center top">
					<view class="orderId">订单编号：{{item.orderNo}}</view>
					<view class="status">{{item.status | statusFilter}}</view>
				</view>
				<view class="flex-align-center bottom">
					<view class="left flex-aj-center">
						<image src="@/static/images/circle.png" class="circle" mode=""></image>
						<view class="line"></view>
						<image src="@/static/images/circle.png" class="circle" mode=""></image>
					</view>
					<view class="right">
						<view class="name">客户姓名：<text>{{item.name}}</text> </view>
						<view class="phone">联系电话：<text>{{item.phone}}</text> </view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-show="status=='loadmore'" ></u-loadmore>
		</view>
		<view class="flex-aj-center" style="margin-top: 300rpx;" v-if="orderList.length==0" >
			<image src="../../static/images/no-data.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import { toLogin } from '../../libs/login'
	import { mapGetters } from "vuex";
	import {
		getOrderList
	} from "@/api/user.js"
	export default{
		data(){
			return{
				current:'',
				orderList:[],
				keyword:'',
				pageNum:1,
				status:'nomore'
			}
		},
		computed: {
			...mapGetters(['isLogin', 'uid']),
		},
		filters: {
			statusFilter: function(value) {
				if (value == 1) {
					return '已注册'
				} else if (value == 2) {
					return '待审核'
				} else if (value == 3) {
					return '审核拒绝'
				} else if (value == 4) {
					return '审核通过'
				} else if (value == 5) {
					return '可结算'
				} else {
					return ''
				}
			}
		},
		onShow(){
			if(!this.isLogin){
				toLogin()
			}else{
				this.getOrderList()
			}
		},
		methods:{
			tabSelect(index){
				this.current = index
				this.search()
			},
			search(){
				this.pageNum = 1
				this.getOrderList()
			},
			getOrderList() {
				getOrderList({
					pageNum: this.pageNum,
					pageSize: 10,
					status:this.current,
					keyword:this.keyword
				}).then(res => {
					if(this.pageNum==1){
						this.orderList = res.data.records;
					}else{
						this.orderList = this.orderList.concat(res.data.records);
					}
					if(res.data.records.length==10){
						this.pageNum++
						this.status = 'loadmore'
					}else{
						this.status = 'nomore'
					}
				})
			}
		},
		onReachBottom() {
			this.getOrderList()
		}
	}
</script>

<style lang="scss" scoped >
	.order{
		.topFix{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			z-index: 10;
			.searchBox{
				margin: 16rpx 24rpx;
				height: 80rpx;
				background: #F5F7FA;
				border-radius: 44rpx;
				padding: 0 24rpx;
				position: relative;
				view{
					position: absolute;
					right: 0;
					top: 0;
					width: 120rpx;
					height: 80rpx;
					background: #FF2945;
					border-radius: 0rpx 44rpx 44rpx 0rpx;
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					font-style: normal;
				}
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
				input{
					width: 392rpx;
					height: 28rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}
			}
			.statusList{
				padding: 24rpx;
				width: fit-content;
				>view{
					min-width: 126rpx;
					height: 64rpx;
					padding: 0 16rpx;
					background: #F5F7FA;
					border-radius: 32rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #292929;
					line-height: 28rpx;
					font-style: normal;
					margin-right: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&:last-child{
						margin-right: 0;
					}
					&.active{
						background: rgba(255,41,69,0.08);
						color: #FF2945;
					}
				}
			}
		}
		.list{
			position: relative;
			top: 224rpx;
			padding: 0 24rpx;
			.item{
				margin-top: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				.top{
					width: 100%;
					height: 96rpx;
					background: #FAFAFA;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					border: 2rpx solid #FFFFFF;
					padding: 0 24rpx;
					.orderId{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 32rpx;
						color: #292929;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}
					.status{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FF2945;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.bottom{
					padding: 48rpx 24rpx;
					.left{
						flex-direction: column;
						margin-right: 16rpx;
						.circle{
							width: 28rpx;
							height: 28rpx;
						}
						.line{
							width: 2rpx;
							height: 48rpx;
							border: 2rpx solid #EBEBEB;
						}
					}
					.right{
						.name,.phone{
							font-family: PingFangSC;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text{
								color: #292929;
							}
						}
						.name{
							margin-bottom: 48rpx;
						}
					}
				}
			}
		}
	}
</style>